<template>
<div style="margin: 0px;padding: 0px;">
  <el-row style="background-color: #dadada" type="flex" align="middle">
    <el-col :span="1">
      <el-button native-type="button" icon="el-icon-arrow-left" style="border-width: 0px;background-color: #dadada" @click="backClick">返回</el-button>
    </el-col>
    <el-col :span="5" :offset="8">
      <label >{{title}}</label>
    </el-col>
  </el-row>
  <div>
    <el-row>
      <label style="margin-right: 20px">选择榜单类型</label>
      <el-radio v-model="selType" :label="0" value="0">图文模式</el-radio>
      <el-radio v-model="selType" :label="1">纯文本</el-radio>
    </el-row>
    <el-row >
      请输入标题  <el-input v-model="inputTitle" placeholder="请输入标题" style="width: 300px"></el-input>
    </el-row>
    <el-row>
      请输入副标题  <el-input v-model="subTitle" placeholder="请输入副标题" style="width: 300px"></el-input>
    </el-row>

    <el-row>
    <image-upload ref="imgUpload" :fileList="fileList" :urlList="urlList" :multiple="false" :limitCount="1"></image-upload>
    </el-row>
    <el-row>
      <div>
        分享图片地址  <el-input v-model="shareImage" placeholder="请输入分享图片地址" style="width: 400px">{{shareImage}}</el-input>
      </div>
    </el-row>
    <el-row>
      <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      <el-button type="info" @click="cancel" plain >取消</el-button>
    </el-row>

  </div>
</div>
</template>

<script>
  import ImageUpload from './Common/ImageUpload'
  export default {
    name: 'AddAndEditBoard',
    data(){
      return{
        title:'新增榜单',
        selType:0,
        loading: false,
        urlList:[],
        fileList:[],
        inputTitle:'',
        subTitle:'',
        categoryId:this.$route.query.categoryId,
        boardId:this.$route.query.boardId,
        shareImage:''
      }
    },
    components:{
      ImageUpload
    },
    mounted(){
      if (this.boardId > 0){
        this.title='编辑榜单'
        this.loadBoard()
      }
    },
    methods:{
      loadBoard(){
        this.getAxios('billboard/load',{
          id:this.boardId
        }).then(res => {
          let data = res.data
          this.inputTitle = data.title
          this.subTitle = data.subTitle
          this.selType = data.type
          this.shareImage = data.shareImage
          if (!this.isEmpty(data.logo)){
            let obj = new Object();
            obj.url = data.logo;
            obj.name = 'logo'
            this.fileList.push(obj);
            this.urlList.push({
              url:data.logo
            })
          }

        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          })
          alert(error.msg)
        })
      },
      // 取消
      cancel(){
        return this.$confirm("取消本次操作?").then(() => {
          this.backClick()
        })

      },
      //提交数据到后台
      handleSubmit() {
        if (this.inputTitle.length < 1){
          this.$message({
            type: 'info',
            message: '请输入标题'
          })
          return
        }
        var urls = new Array()
        for (let i = 0, len = this.urlList.length; i < len; i++) {
          var obj = this.urlList[i]
          urls.push(obj.url)
        }
        this.uploadPicUrl = urls.join(",")

        let url = this.boardId > 0 ? 'billboard/update' : 'billboard/insert'
        var params = new Object()

        params.id = this.boardId
        params.category = this.categoryId
        params.title = this.inputTitle
        params.userId = 1
        if (this.uploadPicUrl){
          params.logo = this.uploadPicUrl
        }
        params.type = this.selType
        params.subTitle = this.subTitle
        params.shareImage = this.shareImage
        debugger
        this.postAxios(url,params).then(res => {

          this.inputTitle = ''
          if (this.urlList.length > 0){
            var upload = this.$refs.imgUpload
            upload.clearAllFile()
            this.urlList.removeAll()
          }
          this.subTitle = ''
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          this.backClick()
        }).catch(error => {
          this.$message({
            type:'info',
            message:error.msg
          });
        })
      },
      backClick(){
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }

</style>
